window.onload = function() {
    //API分类列表
    // let services = document.querySelectorAll('.services ul li')
    // let aList = document.querySelectorAll('.services ul li a')
    // services.forEach(function(li, indexs) {
    //     li.addEventListener('mouseenter', function() {
    //         li.style.borderColor = '#00bdff'
    //         aList[indexs].style.color = '#00bdff'
    //     })
    //     li.addEventListener('mouseleave', function() {
    //         li.style.borderColor = '#666666'
    //         aList[indexs].style.color = '#666666'
    //     })
    // })



    //动态渲染
    let apiDate = [
        { text: '全部' },
        { text: '生活服务' },
        { text: '金融科技' },
        { text: '交通地理' },
        { text: '充值缴费' },
        { text: '数据智能' },
        { text: '企业工商' },
        { text: '应用开发' },
        { text: '电子商务' },
        { text: '吃喝玩乐' },
        { text: '文娱视频' },
        { text: '免费接口大全' },
        { text: '短信' },
        { text: '汽车' },
        { text: '核验' },
        { text: '最新发布' },
        { text: 'API私有化部署' }
    ]
    let strHtml = ''
    let ul = document.querySelector('.services ul')
    for (let i = 0; i < apiDate.length; i++) {
        strHtml += `<li><a href="#" id="${apiDate[i].text}">${apiDate[i].text}</a></li>`
    }
    ul.innerHTML = strHtml
        //输入框中的placeholder的值为API列表中点击的那个
    let as = document.querySelectorAll('.services>ul>li>a')
    let input = document.querySelector('.All input')
    let h = document.querySelector('.All .inputs h5')
    console.log(h);
    as.forEach(function(a, index) {
            a.addEventListener('click', function() {
                input.setAttribute('placeholder', a.id)
                h.textContent = a.id
            })
        })
        //事件委派
        // ul.addEventListener('click', function(e) {
        //     console.log(e.target);
        //     if (e.target.nodeName === 'LI') {
        //         h.textContent = e.target.textContent
        //     }
        // })

    //鼠标移入移出图片变化
    // let allLis = document.querySelectorAll('.All ul li')
    // let abtns = document.querySelectorAll('.All ul li .btn')
    // let contents = document.querySelectorAll('.All ul li .content')
    // allLis.forEach(function(ali, dex) {
    //         ali.addEventListener('mouseenter', function() {
    //             let height = 45
    //             let heigh = 0
    //             let opacity = 0
    //             let timerId = setInterval(function() {
    //                 opacity += 0.1
    //                 height -= 20
    //                 heigh -= 2
    //                 abtns[dex].style.transform = 'translateY(' + height + 'px)'
    //                 contents[dex].style.transform = 'translateY(' + heigh + 'px)'
    //                 abtns[dex].style.opacity = 1
    //                 if (height <= 0) {
    //                     opacity = 1
    //                     height = 0
    //                     clearInterval(timerId)
    //                     timerId = null
    //                 }

    //             }, 40)

    //         })
    //         ali.addEventListener('mouseleave', function() {
    //         let opacity=0
    //             let height = 0
    //             let heigh = -18
    //             let timerId = setInterval(function() {
    //                 opacity-=0.1
    //                 height += 5
    //                 heigh += 2
    //                 abtns[dex].style.transform = 'translateY(' + height + 'px)'
    //                 contents[dex].style.transform = 'translateY(' + heigh + 'px)'
    //                 if (height >= 45) {
    //                 opacity=1
    //                     height = 45
    //                     clearInterval(timerId)
    //                     timerId = null
    //                 }

    //             }, 40)

    //         })
    //     })
    let pagesArr = [
        [
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },

        ],
        [
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },

        ],
        [
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '韩满堂', price: '0.0400', special: false },

        ],
        [
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '短信API服务', price: '0.0400', special: false },
            { src: './imgs/API_01.jpg', name: '221出0行防疫政策指南', price: '0', special: false },
            { src: './imgs/API_02.jpg', name: '身份证实名认证', price: '0.2000', special: true },
            { src: './imgs/API_03.jpg', name: '天气预报', price: '0', special: false },
            { src: './imgs/API_04.jpg', name: '银行卡四元素校验', price: '0.3360', special: true },
            { src: './imgs/API_05.jpg', name: '刘敏锐', price: '0.0400', special: false },

        ],

    ]

    function dynamicShow(date) {
        //获取父元素
        let Allul = document.querySelector('.All ul')
            //声明空字符串
        let str = ''
            //遍历数组
        for (let i = 0; i < date.length; i++) {
            //拼接
            str += `
            <li>
                    <div class="content">
                        <a href="#" class="pics">
                            <img src="${date[i].src}" alt="">
                            <p>${date[i].name}</p>
                        </a>
                        <p class="${date[i].price==0? 'free':'dolors'}">${date[i].price==0? '免费':'￥'+date[i].price+'/次'}</p>
                    </div>
                    <a href="#" class="btn">申请数据</a>
                
            `
            if (date[i].special) {
                str += `
                    <span>企业专用</span>
                    </li>
                    `
            } else {
                str += `</li>`
            }
        }
        Allul.innerHTML = str
    }
    let index = 0
    dynamicShow(pagesArr[0])
        //获取按钮
    let btns = document.querySelectorAll('.pagebtn .btn')
    let nextpage = document.querySelector('.pagebtn .nextpage')
        //遍历按钮
    btns.forEach(function(btn, i) {
        btn.addEventListener('click', function() {
            btns[index].classList.remove('blue')
            this.classList.add('blue')
            index = i
            dynamicShow(pagesArr[index])
        })


    })
    nextpage.addEventListener('click', function() {
        btns[index].classList.remove('blue')
        index++
        btns[index].classList.add('blue')
        dynamicShow(pagesArr[index])
    })

    let methods = document.querySelectorAll('.method')
    let pages = document.querySelectorAll('.page')
    console.log(methods);
    methods.forEach(function(m, index) {
        m.addEventListener('click', function() {
            methods.forEach(function(m) {
                m.classList.remove('active')
            })
            this.classList.add('active')
            pages.forEach(function(p) {
                p.classList.remove('on')
            })
            pages[index].classList.add('on')

        })
    })

    //模态框
    let btncontent = document.querySelectorAll('.All ul .btn')
    let modal = document.querySelector('.modal')
    let login_content = document.querySelector('.login_content')
    console.log(btncontent);
    btncontent.forEach(function(btns, index) {
        btns.addEventListener('click', function() {
            modal.style.display = 'block'
        })
    })
    modal.addEventListener('click', function(e) {
        if (e.target.className === 'modal') {
            modal.style.display = 'none'
        }
    })
}